<template>
  <div class="app-container flex column" style="position: relative">
    <div v-has="'law:add'" class="add-btn cursor" @click="handelAdd">新增</div>
    <top-title :content="content" :updateTime="true"></top-title>
    <div class="content-wrap f1 flex column">
      <div class="search-group">
        <div class="input-wrap">
          <div class="label">法律法规名称:</div>
          <div class="input-item">
            <a-input v-model="queryParam.regulationsName" :maxLength="30" clearable placeholder="请填写法规名称" />
          </div>
        </div>

        <div class="btn-wrap">
          <a-button class="searchBtn" type="primary" @click="searchQuery()"> 搜索 </a-button>
          <a-button class="resetBtn" type="primary" @click="searchReset()"> 重置 </a-button>
        </div>
      </div>

      <div v-if="dataSource.length > 0" class="table-wrap f1 flex">
        <div
          v-for="(item, index) in dataSource"
          :key="index"
          class="common-wrap flex column align-center justify-between"
        >
          <img v-if="item.regulationsImage" :src="`${imgPrefix + item.regulationsImage}`" alt="" />
          <img v-else alt="" src="@/assets/imgs/law.png" />
          <a-tooltip placement="top">
            <template slot="title"> 《{{ item.regulationsName }}》</template>
            <div class="name text-overflow cursor">《{{ item.regulationsName }}》</div>
          </a-tooltip>

          <div class="count">
            <span>{{ item.regulationsArticleCount }}</span> 条条文
          </div>
          <div class="btn-item">
            <span v-has="'law:detail'" class="btn-common operation deatil-color" @click="jumpTargetPage(item.id)"
              >详情
            </span>
            <span v-has="'law:edit'" class="btn-common operation deatil-color" @click="detailHandle(item)">编辑 </span>
            <span v-has="'law:addRecord'" class="btn-common operation deatil-color" @click="jumpTargetPage(item.id)"
              >添加条文
            </span>
            <span v-has="'law:delete'" class="btn-common operation warnColor" @click="showDelete(item)">删除 </span>
          </div>
        </div>
      </div>

      <div v-else class="table-wrap f1 flex">
        <a-card :bordered="false" class="f1">
          <a-empty>
            <span slot="description"> 暂无数据! </span>
          </a-empty>
        </a-card>
      </div>

      <div class="pagenation">
        <a-pagination
          v-model="ipagination.current"
          :page-size.sync="ipagination.pageSize"
          :show-total="ipagination.showTotal"
          :total="ipagination.total"
          show-quick-jumper
          @change="searchQuery"
        />
        <!-- show-size-changer -->
        <!-- @showSizeChange="showSizeChange" -->
      </div>
    </div>
    <add-edit-modal ref="addEditModal" @refresh="searchQuery()"></add-edit-modal>
    <allMessage
      ref="allMessage"
      :publicVisible="publicVisible"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
  </div>
</template>

<script>
import topTitle from '@/components/topTitle'
import allMessage from '@/components/allMessage'
import addEditModal from './modules/addEditModal'
import { comMethods } from '@/mixins/comMethods'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { lawDelete } from '@/api/law'
export default {
  name: '',
  components: { topTitle, addEditModal, allMessage },
  mixins: [JeecgListMixin, comMethods],
  data() {
    return {
      url: {
        list: 'regulations/regulations/page',
      },
      imgPrefix: '',
      publicVisible: false,
      content: [['法律法规']],
    }
  },
  mounted() {},
  methods: {
    searchQuery() {
      this.loadData()
    },
    jumpTargetPage(id) {
      let params = { regulationsId: id }
      this.$router.push({ path: '/law/detail', query: { params } })
    },
    handelAdd() {
      this.$refs.addEditModal.show()
    },
    detailHandle(records) {
      this.$refs.addEditModal.show(records)
    },
    showDelete(records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },
    tipMessage(records) {
      lawDelete({ id: records.id }).then((res) => {
        this.$message.success(res.message)
        this.publicVisible = false
        this.searchQuery()
      })
    },
  },
  destroy() {},
}
</script>

<style lang="less" scoped>
/deep/ .ant-card {
  background: var(--theme-container-bg);
  color: #1163b8;
}

.app-container {
  // padding: 0;
  background: var(--theme-content-bg);

  .content-wrap {
    background: var(--theme-container-bg);
    overflow: hidden;
    .table-wrap {
      // background: #fff;
      overflow: auto;
      padding: 0 0.3rem;
      flex-wrap: wrap;
      .common-wrap {
        width: 3rem;
        height: 2.76rem;
        background: var(--theme-container-bg);
        border-radius: 2px;
        border: 0.01rem solid var(--theme-input-border);
        padding: 0.18rem;
        margin: 16px 32px;
        &:nth-child(5n + 5) {
          margin-right: 0;
        }

        img {
          width: 1.24rem;
          height: 1.4rem;
        }
        .name {
          width: 2.4rem;
          text-align: center;
          margin-top: 0.16rem;
          font-size: 0.16rem;
          font-weight: bold;
          color: #1388ff;
        }
        .count {
          margin-top: 0.1rem;
          font-size: 0.14rem;
          font-weight: 400;
          color: var(--theme-modal-label-value-color);
        }
        .btn-item {
          padding-top: 0.08rem;
          .btn-common {
            border-right: 3px solid #0d4c8e;
            &:last-child {
              border: none;
            }
          }
        }
      }
    }

    .pagenation {
      height: 50px;
      padding: 0 0.3rem;
      text-align: right;
    }
  }
}
</style>
